<template>
	<!-- 商品详情 -->
	<view>
		<!-- 顶部导航 -->
		<view class="topnav1">
			<navigator open-type="navigateBack">
				<image src="/static/images/back_white.png"></image>
			</navigator>
			<view class="title">
				<text>{{goodsInfo.goods_name}}</text>
			</view>
		</view>
		<view class="topnav2" v-if="goodsInfo.point_price">
			<navigator open-type="navigateBack">
				<image src="/static/images/back_white.png"></image>
			</navigator>
			<view class="title">
				<text>{{goodsInfo.goods_name}}</text>
			</view>
			<view class="integral">
				<image src="/static/images/mall/integralicon.png"></image>
				<text>{{integral || 0}}</text>
			</view>
		</view>
		<!-- banner -->
		<banner :bannerList="goodsInfo.images" />
		<!-- 商品信息 -->
		<view class="goodsinfo">
			<view class="goodsinfo_price" v-if="!goodsInfo.point_price || Number(goodsInfo.point_price)<=0">
				<view class="price">￥ {{goodsInfo.merchant_price}}</view>
				<view class="sales">已售{{goodsInfo.sell_num}}</view>
			</view>
			<view class="goodsinfo_integral" v-else>
				<view class="integrals">
					<view class="integral">
						<image src="/static/images/mall/integralicon.png"></image>
						{{goodsInfo.point_price}}
					</view>
					<text v-if="Number(goodsInfo.merchant_price)>0">+</text>
					<view class="price" v-if="Number(goodsInfo.merchant_price)>0">￥{{goodsInfo.merchant_price}}</view>
					<view class="originalprice" v-if="Number(goodsInfo.merchant_price)>0">￥{{goodsInfo.origin_price}}</view>
				</view>
				<view class="sales">已售{{goodsInfo.sell_num}}</view>
			</view>
			<view class="goodsinfo_title">{{goodsInfo.goods_name}}</view>
			<view class="goodsinfo_desc" v-if="Number(goodsInfo.freight_price>0)">邮费￥{{goodsInfo.freight_price}}元</view>
			<view class="goodsinfo_desc" v-else>包邮</view>
		</view>
		<!-- 商品详情 -->
		<view class="goods">
			<view class="goods_title">——商品详情——</view>
			<view class="goods_detail">
				<rich-text :nodes="goodsInfo.text | richtext"></rich-text>
			</view>
		</view>
		<!-- 猜您喜欢 -->
		<view class="like">
			<view class="like_title">——精选商品——</view>
			<!-- 商品列表 -->
			<goodslist :goodsList="goodsList" />
		</view>
		<!-- 加载更多 -->
		<pullDownRefresh :status="loading" />
		<!-- 购买 -->
		<view class="goodsbtn">
			<view class="goodsbtn_btn" @click="nowPay">立即购买</view>
		</view>
		<!-- 购买框 -->
		<u-popup v-model="showBuyframe" mode="bottom" border-radius="36" :mask-close-able="false">
			<view class="buyframe" :style="{height:825 + 'rpx'}">
				<view class="buy">
					<view class="buy_title">立即购买</view>
					<view class="buy_close" @click="showBuyframe = false">X</view>
				</view>
				<view class="buygoods">
					<image :src="goodsPic" class="buygoods_pic"></image>
					<view class="buygoodsinfo">
						<view class="buygoodsinfo_title">{{goodsInfo.goods_name}}</view>
						<view class="goodsinfo_price" v-if="!goodsInfo.point_price || Number(goodsInfo.point_price)<=0">
							<view class="price">￥ {{goodsPrice}}</view>
						</view>
						<view class="goodsinfo_integral" v-else>
							<div class="integrals">
								<view class="integral">
									<image src="/static/images/mall/integralicon.png"></image>
									{{goodsInfo.point_price}}
								</view>
								<text v-if="Number(goodsPrice)>0">+</text>
								<view class="price" v-if="Number(goodsPrice)>0">￥{{goodsPrice}}</view>
							</div>
						</view>
						<view class="buygoodsinfo_spec">已选规格：{{selectedSpec}}</view>
					</view>
				</view>
				<view class="relevant">
					<view class="relevant_top">
						<view class="title">颜色</view>
					</view>
					<view class="relevant_bot" v-for="(item1,index1) in specNameList" :key="index1">
						<view class="relevant_bot_item" :class="curSpecIndex1===index1?'spec_active':''" @click="selectSpec1(item1,index1)">{{item1}}</view>
					</view>
					<view class="relevant_top">
						<view class="title">内存</view>
					</view>
					<view class="relevant_bot" v-for="(item2,index2) in specList" :key="item2.id">
						<view class="relevant_bot_item" :class="curSpecIndex2===index2?'spec_active':''" @click="selectSpec2(item2,index2)">{{item2.ram}}</view>
					</view>
				</view>
				<view class="relevant_num">
					<view class="title">数量：</view>
					<view class="goods_num">
						<view class="jian" @click="reduceNum()">
							<image src="/static/images/mall/jian_1.png" v-if="amount<2"></image>
							<image src="/static/images/mall/jian_2.png" v-else></image>
						</view>
						<view class="num_input">
							<input type="number" v-model="amount" disabled />
						</view>
						<view class="add" @click="addNum()">
							<image src="/static/images/mall/add.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="buybtn" @click="buyNow">
					<text>确定</text>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showNospecBuyframe" mode="bottom" border-radius="36" :mask-close-able="false">
			<view class="buyframe" :style="{height:520 + 'rpx'}">
				<view class="buy">
					<view class="buy_title">立即购买</view>
					<view class="buy_close" @click="showNospecBuyframe = false">
						<image style="width: 60rpx;height:60rpx;" src="../../static/images/mall/guanbi.png"></image>
					</view>
				</view>
				<view class="buygoods">
					<image :src="goodsPic" class="buygoods_pic"></image>
					<view class="buygoodsinfo">
						<view class="buygoodsinfo_title">{{goodsInfo.goods_name}}</view>
						<view class="goodsinfo_price" v-if="!goodsInfo.point_price || Number(goodsInfo.point_price)<=0">
							<view class="price">￥ {{goodsPrice}}</view>
						</view>
						<view class="goodsinfo_integral" v-else>
							<div class="integrals">
								<view class="integral">
									<image src="/static/images/mall/integralicon.png"></image>
									{{goodsInfo.point_price}}
								</view>
								<text v-if="Number(goodsPrice)>0">+</text>
								<view class="price" v-if="Number(goodsPrice)>0">￥{{goodsPrice}}</view>
							</div>
						</view>
					</view>
				</view>
				<view class="relevant"></view>
				<view class="relevant_num">
					<view class="title">数量：</view>
					<view class="goods_num">
						<view class="jian" @click="reduceNum()">
							<image src="/static/images/mall/jian_1.png" v-if="amount<2"></image>
							<image src="/static/images/mall/jian_2.png" v-else></image>
						</view>
						<view class="num_input">
							<input type="number" v-model="amount" disabled />
						</view>
						<view class="add" @click="addNum()">
							<image src="/static/images/mall/add.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="buybtn" @click="buyNowNospec">
					<text>确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import banner from '@/components/banner/index2'
	import goodslist from '@/components/goodslist'
	import pullDownRefresh from '@/components/pullDownRefresh'
	export default {
		components:{
			banner,
			goodslist,
			pullDownRefresh
		},
		data() {
			return {
				id:0,
				goodsType:1,//商品类型 1普通 2积分
				bannerindex:0,
				goodsInfo:{
					id:'',
					goods_name:'',//商品名称
					desc:'',//描述
					merchant_price:'',//现价
					origin_price:'',//原价
					sell_num:'',//销量
					point_price:'',//积分
					freight_price:'',//运费
					images:[],//商品主图
					text:''//商品详情
				},
				integral:'',//积分余额
				goodsList:[],
				goodsPic:'',//商品主图
				goodsPrice:'',//当前选中规格的价格
				stock: '', //库存
				amount: 1, //购买数量
				goods:{},//商品信息
				specs:{},//sku总列表
				specNameList:[],//sku类名列表
				specList: [], //sku二级列表
				curSpec1:'',//当前选中的颜色
				curSpec2:'',//当前选中的内存
				curSpecIndex1:'',//当前选中的颜色索引
				curSpecIndex2:'',//当前选中的内存索引
				selectedSpec:'',//已选规格
				loading:0,
				showBuyframe:false,//显示支付框
				showNospecBuyframe:false,//显示无规格支付框
				page:1
			}
		},
		filters: {
			richtext(richtext) {
				richtext = richtext.replace(/<img/gi,'<img style="width: 100%;"');
				return richtext;
			}
		},
		onLoad(options) {
			console.log("options: ",options);
			this.id = options.id;
			this.goodsType = options.goodsType;
			if(this.goodsType == 2){
				this.getShoppgoodsdetail();
				this.getShopogoodsspec();
				this.getShoprecommendpgoods();
			}else{
				this.getShopgoodsdetail();
				this.getShopgoodsspec();
				this.getShoprecommendgoods();
			}
		},
		onReachBottom() {
			this.page++;
			this.getShoprecommendgoods();
			if(this.goodsType == 2){
				this.getShoprecommendpgoods();
			}else{
				this.getShoprecommendgoods();
			}
		},
		methods: {
			//获取普通商品详情
			getShopgoodsdetail(){
				this.$api.shopgoodsdetail({goods_id:this.id}).then(res=>{
					console.log("商品详情: ",res);
					this.goodsInfo = res;
					this.goodsPrice = res.merchant_price;
				})
			},
			//获取普通商品规格
			getShopgoodsspec(){
				this.$api.shopgoodsspec({goods_id:this.id}).then(res=>{
					console.log("商品规格: ",res);
					this.goodsPic = res.goods.cover_image;
					this.specNameList = Object.keys(res.spec);
					this.goods = res.goods;
					this.specs = res.spec;
					this.curSpec1 = this.specNameList[0];
					this.specList = res.spec[this.curSpec1];
				})
			},
			//获取积分商品详情
			getShoppgoodsdetail(){
				this.$api.shoppgoodsdetail({goods_id:this.id}).then(res=>{
					console.log("商品详情: ",res);
					this.goodsInfo = res;
					this.goodsPrice = res.merchant_price;
				})
			},
			//获取积分商品规格
			getShopogoodsspec(){
				this.$api.shoppgoodsspec({goods_id:this.id}).then(res=>{
					console.log("商品规格: ",res);
					this.goodsPic = res.goods.cover_image;
					this.specNameList = Object.keys(res.spec);
					this.goods = res.goods;
					this.specs = res.spec;
					this.integral = res.point;
					this.curSpec1 = this.specNameList[0];
					this.specList = res.spec[this.curSpec1];
				})
			},
			//推荐普通商品
			getShoprecommendgoods(){
				this.loading = 1;
				this.$api.shoprecommendgoods({
					goods_id:this.id,
					offset:this.page
				}).then(res=>{
					if(res.length>0){
						this.loading = 0;
						this.goodsList = this.goodsList.concat(res);
					}else{
						this.loading = 3;
						// uni.showToast({
						// 	title:'没有更多了~',
						// 	icon:'none'
						// })
					}
				})
			},
			//推荐积分商品
			getShoprecommendpgoods(){
				this.loading = 1;
				this.$api.shoprecommendpgoods({
					goods_id:this.id,
					offset:this.page
				}).then(res=>{
					if(res.length>0){
						this.loading = 0;
						this.goodsList = this.goodsList.concat(res);
					}else{
						this.loading = 3;
						uni.showToast({
							title:'没有更多了~',
							icon:'none'
						})
					}
				})
			},
			//立即购买
			nowPay(){
				if(!uni.getStorageSync('token')){
					uni.showModal({
						title: '温馨提示',
						content: '登录后可继续操作，是否登录？',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}
						}
					})
				}else{
					if(JSON.stringify(this.specs)!='{}'){
						this.showBuyframe = true;
					}else{
						this.showNospecBuyframe = true;
					}
				}
			},
			//减少数量
			reduceNum() {
				if(JSON.stringify(this.specs)!='{}'){
					if (this.curSpec2 == '') {
						uni.showToast({
							title: '请先选择规格',
							icon: 'none'
						})
						return
					}
					if (this.amount < 2) {
						return
					}
					this.amount--;
				}else{
					if (this.amount < 2) {
						return
					}
					this.amount--;
				}
			},
			//增加数量
			addNum() {
				if(JSON.stringify(this.specs)!='{}'){
					if (this.curSpec2 == '') {
						this.showToast('请先选择规格');
						return
					}
					if (this.amount >= this.curSpec2.storage) {
						this.showToast('已达最大可购买库存')
					} else {
						this.amount++;
					}
				}else{
					if (this.amount >= this.goods.storage) {
						this.showToast('已达最大可购买库存')
					} else {
						this.amount++;
					}
				}
			},
			showToast(msg) {
				uni.showToast({
					title:msg,
					icon:'none'
				})
			},
			//选择颜色
			selectSpec1(spec, index) {
				console.log(spec);
				this.curSpecIndex2 = '';
				this.selectedSpec = this.curSpec1 = spec;
				this.curSpec2 = '';
				this.curSpecIndex1 = index;
				this.specList = this.specs[this.curSpec1];
			},
			//选择内存
			selectSpec2(spec, index) {
				console.log('选择内存',spec);
				if(spec.storage>0){
					this.curSpec2 = spec;
					this.curSpecIndex2 = index;
					this.goodsPrice = this.curSpec2.price;
					this.selectedSpec = this.curSpec2.color + '/' + this.curSpec2.ram;
				}else{
					this.showToast('内存不足，请选择其它规格');
				}
			},
			// 立即购买
			buyNow(){
				if (this.curSpec2 == '') {
					uni.showToast({
						title: '请先选择规格',
						icon: 'none'
					})
					return
				}
				this.showBuyframe = false;
				uni.navigateTo({
					url:`/pages/mall/confirmOrder?goods_id=${this.id}&goods_spec_id=${this.curSpec2.id}&num=${this.amount}&goodsType=${this.goodsType}`
				})
			},
			// 无规格立即购买
			buyNowNospec(){
				this.showNospecBuyframe = false;
				uni.navigateTo({
					url:`/pages/mall/confirmOrder?goods_id=${this.id}&goods_spec_id=0&num=${this.amount}&goodsType=${this.goodsType}`
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	padding-top: calc(var(--status-bar-height) + 145rpx);
	padding-bottom: 100rpx;
}
.topnav1{
	width: 750rpx;
	background: linear-gradient(180deg, #3161c2 0%, #3364c5 36%, #459ee9 100%);
	padding: calc(var(--status-bar-height) + 50rpx) 30rpx 50rpx;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	z-index: 999;
	
	navigator{
		position: absolute;
		
		image {
			width: 22rpx;
			height: 40rpx;
		}
	}
	.title {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		
		text{
			width: 560rpx;
			@include one;
			display: inline-block;
		}
	}
	.integral{
		width: 190rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		@include center;
		text-align: center;
		position: absolute;
		top: calc(var(--status-bar-height) + 50rpx);
		right: 30rpx;
		
		image{
			width: 34rpx;
			height: 34rpx;
		}
		text{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			margin-left: 10rpx;
			width: 120rpx;
			@include one;
		}
	}
}
.topnav2{
	width: 750rpx;
	background: linear-gradient(180deg, #3161c2 0%, #3364c5 36%, #459ee9 100%);
	padding: calc(var(--status-bar-height) + 50rpx) 30rpx 50rpx;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	z-index: 999;
	@include between;
	
	navigator{
		
		image {
			width: 22rpx;
			height: 40rpx;
		}
	}
	.title {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		
		text{
			width: 400rpx;
			@include one;
			display: inline-block;
		}
	}
	.integral{
		width: 190rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		@include center;
		text-align: center;
		
		image{
			width: 34rpx;
			height: 34rpx;
		}
		text{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			margin-left: 10rpx;
			width: 120rpx;
			@include one;
		}
	}
}
.goodsinfo{
	width: 750rpx;
	background: #FFFFFF;
	padding: 30rpx;
	
	&_price{
		@include between;
		padding: 0 9rpx 0 7rpx;
		margin-top: 17rpx;
		height: 30rpx;
		
		.price{
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #FE3E46;
		}
		.sales{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
		}
	}
	&_integral{
		@include between;
		padding: 0 9rpx 0 7rpx;
		margin-top: 17rpx;
		height: 30rpx;
		
		.integrals{
			@include align-center;
		}
		.integral{
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FF7000;
			@include align-center;
			
			image{
				width: 34rpx;
				height: 34rpx;
				margin-right: 18rpx;
			}
		}
		.originalprice{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			text-decoration: line-through;
			color: #666666;
			margin-left: 41rpx;
		}
		text{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			margin: 0 20rpx;
		}
		.price{
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #FE3E46;
		}
		.sales{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
		}
	}
	&_title{
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		line-height: 36rpx;
		@include two;
		margin-top: 26rpx;
	}
	&_desc{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-top: 25rpx;
	}
}
.goods {
	width: 750rpx;
	background-color: $white;
	padding-top: 30rpx;
	margin-top: 30rpx;

	&_title {
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		text-align: center;
		margin-bottom: 30rpx;
	}
}
.like {
	width: 750rpx;
	background-color: $white;
	padding: 30rpx 0;
	margin-top: 30rpx;

	&_title {
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		text-align: center;
		margin-bottom: 30rpx;
	}
}
.goodsbtn{
	width: 750rpx;
	height: 100rpx;
	background: #FFFFFF;
	@include center;
	position: fixed;
	bottom: 0;
	z-index: 999;
	
	&_btn{
		width: 690rpx;
		height: 70rpx;
		background: linear-gradient(#FFBA00, #FE2E1C);
		border-radius: 35rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		@include center;
	}
}
.buyframe{
	padding: 0 30rpx 30rpx;
	box-sizing: border-box;
	
	.buy{
		width: 100%;
		background-color: #FFFFFF;
		text-align: center;
		position: relative;
		
		&_title{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			margin: 48rpx 0;
		}
		&_close{
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			position: absolute;
			top: 0rpx;
			right: 30rpx;
		}
	}
	.buygoods{
		display: flex;
		
		&_pic{
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
		}
		.buygoodsinfo{
			width: 500rpx;
			height: 140rpx;
			margin-left: 30rpx;
			@include column-between;
			
			&_title{
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				@include one;
			}
			&_spec{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
				@include one;
			}
			&_price{
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FF0000;
			}
		}
	}
	.relevant{
		
		&_top{
			@include align-center;
			margin-top: 30rpx;
			
			.title{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
			.text{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: normal;
				color: #999999;
				margin-left: 34rpx;
				
				text{
					margin-left: 13rpx;
				}
			}
		}
		&_bot{
			display: inline-block;
			margin-top: 20rpx;
			
			&_item{
				border: 2rpx solid #AAAAAA;
				border-radius: 10rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
				padding: 14rpx 25rpx;
				margin-right: 20rpx;
			}
			.spec_active{
				background-color: #FF6408;
				color: #FFFFFF;
			}
			.spec_dis{
				background-color: #CCCCCC;
			}
		}
	}
	.relevant_num{
		margin-top: 30rpx;
		
		.title{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}
		.goods_num {
			@include align-center;
			margin-top: 20rpx;
		
			.jian {
				width: 40rpx;
				height: 40rpx;
				background: #FFFFFF;
				border: 2rpx solid #AAAAAA;
				border-radius: 10rpx;
				@include center;
		
				image {
					width: 18rpx;
					height: 6rpx;
				}
			}
		
			.add {
				width: 40rpx;
				height: 40rpx;
				background: #FFFFFF;
				border: 2rpx solid #AAAAAA;
				border-radius: 10rpx;
				@include center;
		
				image {
					width: 20rpx;
					height: 20rpx;
				}
			}
		
			.num_input {
				width: 120rpx;
				height: 50rpx;
				background: #FFFFFF;
				border: 2rpx solid #AAAAAA;
				border-radius: 10rpx;
				margin: 0 16rpx;
				text-align: center;
				@include center;
		
				input {
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #333333;
				}
			}
		}
	}
	.buybtn{
		@include center
		position: fixed;
		bottom: 42rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index:999;
		
		text{
			width: 560rpx;
			height: 70rpx;
			background: linear-gradient(#FFBA00, #FE2E1C);
			border-radius: 35rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
		}
	}
}
</style>
